<template>
  <div class="next-withdraw">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form :model="searchForm" inline size="small">
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-circle-check" @click="success">确认打款</el-button>
          <el-button size="small" type="danger" icon="el-icon-error" @click="faild">拒绝打款</el-button>
          <el-button size="small" type="primary" icon="el-icon-download" @click="handleDownload">批量导出</el-button>
        </el-form-item>
        <el-form-item label="代理商名称">
          <el-select filterable v-model="searchForm.sr" placeholder="全部" clearable>
            <el-option v-for="(item,index) in agent_name" :key="index" :value="item" :label="item">{{ item }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现状态">
          <el-select placeholder="全部" v-model="searchForm.option" clearable>
            <el-option v-for="(item,index) in option" :value="item.status_id" :label="item.status_name" :key="index">{{ item.status_name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现时间">
          <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" v-model="searchForm.time"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="small" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="money_data" size="small" @selection-change="handleSelectionChange" @toggleRowSelection="test" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column type="selection" width="55" :selectable="test"></el-table-column>
        <el-table-column label="提现时间" prop="created_at" align="center"></el-table-column>
        <el-table-column label="代理商名称" prop="agent_name" align="center"></el-table-column>
        <el-table-column label="收款人" prop="pay_name" align="center"></el-table-column>
        <el-table-column label="收款账户" prop="account" align="center"></el-table-column>
        <el-table-column label="提现金额" prop="money" align="center"></el-table-column>
        <el-table-column label="提现状态" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.status === '打款成功' ? 'succ' : scope.row.status === '打款失败' ? 'err' : scope.row.status === '已申请' ? 'tip' : ''">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="show(scope.row.cash_num)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" :current-page.sync="page.current" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
    <el-row>
      <el-dialog title="提现详情" :visible.sync="dialog_show" width="430px">
        <el-form>
          <el-form-item label="户名：">
            <span>{{ dialog.pay_name }}</span>
          </el-form-item>
          <el-form-item label="卡号：">
            <span>{{ dialog.account }}</span>
          </el-form-item>
          <el-form-item label="开户行：">
            <span>{{ dialog.deposit_bank }}</span>
          </el-form-item>
          <el-form-item label="支行名称：">
            <span>{{ dialog.sub_bank }}</span>
          </el-form-item>
          <el-form-item label="提现金额：">
            <span>￥{{ dialog.money }}</span>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { nextInit, nextPage, nextSearch, success, faild, nextDialog } from '@/api/commission'

export default {
  name: 'next-withdraw',
  components: {
    Breadcrumb
  },
  data() {
    return {
      dialog_show: false,
      mes: '',
      money_data: [],
      download: [],
      page: {
        total: 0,
        pageSize: 1,
        current: 1
      },
      searchForm: {
        option: '',
        time: [],
        sr: ''
      },
      option: [],
      agent_name: [],
      checkbox: [],
      dialog: {
        pay_name: '',
        account: '',
        deposit_bank: '',
        sub_bank: '',
        money: ''
      }
    }
  },
  methods: {
    show(id) {
      nextDialog(id).then(response => {
        if (response.data.errorCode === 0) {
          this.dialog.pay_name = response.data.result.pay_name
          this.dialog.account = response.data.result.account
          this.dialog.deposit_bank = response.data.result.deposit_bank
          this.dialog.sub_bank = response.data.result.sub_bank
          this.dialog.money = response.data.result.money
          this.dialog_show = true
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleSelectionChange(v) {
      this.download = v
      this.checkbox = v
    },
    handleDownload() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['提现时间', '代理商名称', '收款人', '收款账号', '提现金额', '提现状态'] // excel 表格头
        const filterVal = ['created_at', 'agent_name', 'pay_name', 'account', 'money', 'status'] // excel key值
        const list = this.download
        const data = this.formatJson(filterVal, list) // 自行洗数据 按序排序的一个array数组
        export_json_to_excel(tHeader, data, '提现详情-' + new Date())
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleCurrentChange(v) {
      nextPage(this.id, v, this.searchForm).then(response => {
        this.money_data = response.data.result.cashs.data
        this.page.total = response.data.result.cashs.total
      })
    },
    search() {
      nextSearch(this.id, this.searchForm).then(response => {
        this.money_data = response.data.result.cashs.data
        this.page.total = response.data.result.cashs.total
        this.page.current = response.data.result.cashs.current_page
      })
    },
    success() {
      if (this.checkbox.length === 0) {
        this.$message.error('请选择打款对象~')
      } else {
        success(this.checkbox).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            nextInit(this.id).then(response => {
              this.money_data = response.data.result.cashs.data
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    faild() {
      if (this.checkbox.length === 0) {
        this.$message.error('请选择打款对象~')
      } else {
        faild(this.checkbox).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            nextInit(this.id).then(response => {
              this.money_data = response.data.result.cashs.data
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    test(row, v) {
      if (row.status === 1) {
        return false
      } else {
        return true
      }
    }
  },
  created() {
    nextInit(this.id).then(response => {
      this.money_data = response.data.result.cashs.data
      this.page.total = response.data.result.cashs.total
      this.page.pageSize = response.data.result.cashs.per_page
      this.option = response.data.result.status_name
      this.agent_name = response.data.result.name
    })
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  }
}
</script>

<style lang="scss" scoped>
.next-withdraw{
.el-row{ 
  /deep/ .el-dialog{
    .el-dialog__body{
      padding-bottom: 0;
      padding-top: 0;
      .el-form{
        .el-form-item{
          margin: 0;
          display: block;
          .el-input{
            display: inline-block;
            width: 60%;
          }
          p{
            margin: 10px 0;
            padding: 10px 0;
            font-size: 12px;
            line-height: 1.5;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
          }
          .el-button{
            padding: 8px 10px;
            border: 1px solid #409eff;
          }
          span{
            font-size: 12px;
          }
        }
      }
    }
  }
 }
}
</style>
